<template>
  <div class="nav">
    <div>
      <h2 class="bigText">hello
        <br>world
      </h2>
      <h3 @tap="jojojo">溜了溜了走错世界了快点我</h3>
    </div>
    <div class="Devil">
      <div class="eye">
        <div class="eyeball"></div>
      </div>
      <div class="mouth"></div>
    </div>
    <div class="Devil another">
      <div class="eye">
        <div class="eyeball"></div>
      </div>
      <div class="mouth"></div>
    </div>
    <div class="pageloading" :class="{complete:iscomplete,over:isover}">
      <div class="Devil">
        <div class="eye">
          <div class="eyeball"></div>
        </div>
        <div class="mouth"></div>
      </div>
      <div class="loading">
        <div class="run" :style="{width:timer+'%'}"></div>
      </div>
    </div>
  </div>

</template>
<script>
  export default {
    name: 'City',
    data () {
      return {
        timer:0,
        flag:true,
        aaa:null,
        iscomplete:false,
        isover:false
      }
    },
    methods:{
      get(){
        this.timer++;
        if(this.timer>100){
          this.iscomplete=true;
          this.bb()
        }
      },
      bb(){
        this.isover=true
        clearInterval(this.aaa);
      },
      jojojo(){
        // wx.navigateTo({
        //   url:'/pages/index/main'
        // })
        wx.switchTab({
          url:'/pages/index/main'
        })
      }
    },
    mounted() {
      this.aaa = setInterval(this.get, 20);
    },
    beforeDestroy() {
      clearInterval(this.aaa);
    }

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h3{
    color:#FF3030;
  }
  .pageloading.complete.over{
    display: none;
  }
  *{
    margin:0;
    padding:0
  }
  .nav{
    height: 1300rpx;
    width: 100%;
    background-color:#40e0d0;
    display:flex;
    justify-content: center;
    align-items: center;
  }
  .Devil{
    position: relative;
    width:100rpx;
    height: 100rpx;
    border-radius:20rpx;
    margin:10rpx;
    background-color:#e55a54;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow:0 10rpx 20rpx rgba(0,0,0,0.2);
    animation:jumping 0.8s infinite alternate;
  }
  .Devil .eye{
    height: 40%;
    width: 40%;
    border-radius:50%;
    background-color:#fff;
    margin:10rpx;
    display:flex;
    justify-content: center;
    align-items: center;

  }
  .Devil .eye .eyeball{
    width: 50%;
    height:50%;
    border-radius:50%;
    background-color:#8B658B;
    animation:eyemove 1.6s infinite alternate;
  }
  .Devil .mouth{
    width:32%;
    height: 12rpx;
    border-radius: 12rpx;
    background-color:#fff;


  }
  .Devil::before,
  .Devil::after{
    position:absolute;
    content: "";
    display: block;
    width:20%;
    height: 10rpx;
    border-radius:10rpx;
    background-color:#fff;
    top:-10rpx;
    left:50%;
  }
  .Devil::before{
    transform: translateX(-70%) rotate(45deg);
  }
  .Devil::after{
    transform: translateX(-30%) rotate(-45deg);
  }
  .Devil.another{
    animation-delay: 0.5s;
    background-color:#8B658B;
  }
  .Devil.another .eyeball,
  .Devil.another .mouth{
    background-color:#e55a54;

  }
  @keyframes jumping{
    50%{
      top:0;
      box-shadow:0 10rpx 20rpx rgba(0,0,0,0.2);
    }
    100%{
      top:-50rpx;
      box-shadow:0 120rpx 20rpx rgba(0,0,0,0.2);
    }
  }
  @keyframes eyemove{
    0%,
    10%{
      transform:translate(50%);
    }
    90%,
    100%{
      transform:translate(-50%);
    }
  }
  .pageloading{
    position:fixed;
    height:1300rpx;
    width:100%;
    background-color:#FFD700;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: opacity 0.5s

  }
  .pageloading .loading{
    width:200rpx;
    height: 5rpx;
    border-radius:8px;
    background-color:#ffffff;
    margin-top:50rpx;
    overflow: hidden;

  }
  .pageloading .loading .run{
    width:0%;
    height: 100%;
    background-color:#e55a54;

  }
  .pageloading.complete{
    opacity: 0;
  }
  .pageloading.complete .Devil{
    transition: 0.5s;
    transform: scale(0.1) rotateZ(360deg);
  }
  .bigText{
    color:#ffffff
  }
</style>
